<template>
    <vxe-modal :title='title' show-footer :loading="confirmLoading" destroyOnClose width='62%' v-model='visible' @close='handleCancel'>
        <h-form :config='formConfig' ref='formRef' :options='formOptions' v-model='model' @change='formChange' />
        <div slot='footer' style='text-align: center'>
            <a-space>
                <a-button type='danger' @click='handleCancel'> 关闭</a-button>
                <a-button :loading='confirmLoading' type='primary'
                        @click='handleSubmit'> 保存
                </a-button>
            </a-space>
        </div>
    </vxe-modal>
</template>

<script>
    import {
        getSelectOptions,
        getSetFilesByForm,
        getSetMultipleSelectIdByForm,
    } from '@/utils/formUtil.js'
    import { subTableFormOptions } from './data'

    <#assign selectUser = false>
    <#assign selectDept = false>
    <#list fieldData as item>
    <#assign fieldShowType = item.fieldShowType>
    <#if fieldShowType == "13">
    <#assign selectUser = true>
    </#if>
    <#if fieldShowType == "14">
    <#assign selectDept = true>
    </#if>
    </#list>
    <#if selectUser == true || selectDept == true>
    import Vue from 'vue'
    </#if>
    <#if selectUser == true>
    import SysUserSelect from '@/views/components/SysUserSelect.vue';
    Vue.component('SysUserSelect', SysUserSelect);
    </#if>
    <#if selectDept == true>
    import HDepartSelect from '@/views/components/HDepartSelect.vue';
    Vue.component('HDepartSelect', HDepartSelect);
    </#if>

    export default {
        name: "${webPrefix}SubFormModal",
        data() {
            return {
                title: "",
                formConfig: {
                    columns: 2,
                },
                visible: false,
                confirmLoading: false,
                subTableFormOptions: subTableFormOptions(this),
                model: {},
                formOptions: [],
                callback: () => {},
            }
        },
        created(){
            for (const item in this.subTableFormOptions) {
                let subFormConfig = [
                    <#if itemList??>
                    <#list itemList as item>
                    <#assign fieldItemData = item.fieldItemData>
                    <#list fieldItemData as itemData>
                    <#assign fieldName = itemData.dbFieldName>
                    <#assign dictOriginType = itemData.dictOriginType>
                    <#assign dictTable = itemData.dictTable>
                    <#assign dictField = itemData.dictField>
                    <#assign dictText = itemData.dictText>
                    <#if dictOriginType == "2">
                    { dictTable: "${dictTable}", dictField: "${dictField}", dictText: "${dictText}", optionKey: "${fieldName}" },
                    </#if>
                    </#list>
                    </#list>
                    </#if>
                ]
                getSelectOptions(subFormConfig, this.subTableFormOptions[item])
            }
        },
        methods: {
            show(row, formKey, operateType, callback) {
                this.visible = true;
                this.formOptions = this.subTableFormOptions[formKey]
                this.callback = callback
                this.visible = true
                this.title = operateType === 'edit' ? '编辑' : '新增';
                this.model = {
                    ...row,
                    ...getSetFilesByForm(this.formOptions, row, 'set'),
                    ...getSetMultipleSelectIdByForm(this.formOptions, row, 'set'),
                };
            },
            handleSubmit() {
                this.$refs.formRef.getData()
            },
            formChange(values) {
                if (this.confirmLoading) return
                this.confirmLoading = true;
                const params = {
                    ...values,
                    ...this.model,
                    ...getSetMultipleSelectIdByForm(this.formOptions, values),
                };
                this.callback(params)
                this.visible = false
                setTimeout(() => this.confirmLoading = false, 300)
            },
            handleCancel() {
                this.confirmLoading = false;
                this.visible = false;
            },
        },
    }
</script>

<style scoped lang='less'>

</style>